﻿<style>
    #selector {
        position: relative
    }

        #selector .lg-search-container {
            padding: 0;
        }

        #selector .lg-search {
            border-bottom: 1px solid #f0f0f0;
            background: #fff;
            padding-bottom: 10px;
            margin-bottom: 10px;
            position: sticky;
            top: 0;
            z-index: 2;
            width: 100%;
            padding: 10px;
        }

        #selector .lg-plans {
            padding: 0 10px;
        }

        #selector li.lg-plans-item {
            line-height: 35px;
            margin: 5px 0;
            padding: 0 5px;
            border: 1px solid #f0f0f0;
            cursor: pointer;
            position: relative;
        }

            #selector li.lg-plans-item .fa-check {
                position: absolute;
                top: 0;
                right: 0;
                z-index: 2;
                color: #fff;
                font-size: 10px;
            }

            #selector li.lg-plans-item:after {
                width: 0;
                height: 0;
                border-top: 20px solid #1E9FFF;
                border-left: 20px solid transparent;
                content: "";
                display: none;
                position: absolute;
                top: 0;
                right: 0;
            }

            #selector li.lg-plans-item.selected:after {
                display: block;
            }

            #selector li.lg-plans-item.selected {
                color: #1E9FFF;
            }
</style>

<div class="layui-card" id="lg-EditExam">
    <div class="layui-card-header">
        <i class="fa fa-home fa-fw"></i>编辑考试
        <div class="f-r">
            <button class="layui-btn layui-btn-primary layui-btn-sm" v-on:click="back()"><i class="fa fa-mail-reply fa-fw"></i>返回</button>
        </div>
    </div>
    <div class="layui-card-body" id="">
        <div class="layui-form-item lg-form-pane">
                <lg-form-singletext :data="formData[0]" v-model:value="exam.Title"></lg-form-singletext>
                <lg-form-select :data="formData[1]" v-model:value="exam.TplId" val-type="value"></lg-form-select>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>绑定招生计划</legend>
                </fieldset>
                <a class="layui-btn layui-btn-primary" v-on:click="OnSelectPlan">{{exam.PlanTitle||"选择招生计划"}}</a>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>自定义准考证规则</legend>
                </fieldset>
                <div class="layui-form-item">
                    <blockquote class="layui-elem-quote layui-text">
                        <p>准考证号规则：准考证前缀+随机数</p>
                        <p>例：前缀为：G1202001 , 随机数位数为：3 , 生成的准考证号：G1202001001</p>
                    </blockquote>
                </div>
                <div class="layui-form-item">
                    <lg-form-singletext :data="formData[2]" v-model:value="exam.NumRule"></lg-form-singletext>
                    <lg-form-select :data="formData[3]" v-model:value="exam.NumLength" val-type="value"></lg-form-select>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>考试科目</legend>
                </fieldset>
                <div class="layui-form-item lg-form-project">
                    <table class="LgTable" style="width: auto;">
                        <tbody>
                            <tr>
                              <td v-for="(item,index) in exam.Project" style="position:relative">
                                <input v-model="exam.Project[index]" class="lg-form-reg" data-reg="required" />
                                <span class="fa fa-fw fa-close" v-on:click="Remove(index)" style="position:absolute;top:13px;right:13px;color:#f00"></span>
                              </td>
                              <td style="min-width:150px;cursor:pointer" v-on:click="AddProject()"><i class="fa fa-plus fa-fw fa-xs" aria-hidden="true"></i> 添加</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div class="layui-form-item">
                    <div class="layui-input-block" style="padding:50px 0 0 0;text-align:center">
                        <button type="button" class="layui-btn" v-on:click="Submit">立即提交</button>
                        <button type="button" v-on:click="back()" class="layui-btn layui-btn-primary">放弃添加</button>
                    </div>
                </div>
        </div>
        <!-- 内容主体区域结束 -->
    </div>
    <div class="layui-card-body" id="selector" style="display:none">
        <div class="lg-search lg-layout-row lg-layout-row-auto" style="">
            <div class="lg-search-item" style="width:100px">
                <lg-form-date :data="{Title:'学年',Name:'lg-year'}" v-model:value="selector.where.Year" render-type="year" v-on:done="getPlansForOption"></lg-form-date>
            </div>
            <div class="lg-search-item" style="width:130px">
                <lg-form-select :data="{Title:'学期',Options:selector.options.Semester}" v-model:value="selector.where.Semester" val-type="value" v-on:done="getPlansForOption"></lg-form-select>
            </div>
            <div class="lg-search-item" style="width:180px">
                <lg-form-select :data="{Title:'班级',Options:selector.options.Grades}" v-model:value="selector.where.GradeId" val-type="value" v-on:done="getPlansForOption"></lg-form-select>
            </div>
        </div>
        <div class="lg-plans">
            <ul>
                <li :class="['lg-plans-item',{'selected':selector.selected.Value==item.Value}]" v-for="item in selector.plans" v-on:click="OnPlanSelected(item)">{{item.Text}}<span class="fa fa-check"></span></li>
            </ul>
        </div>
        <!-- 内容主体区域结束 -->
    </div>
</div>

<script type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js'
    freeForm.addEventListener();
    frame.createPage({
        mounted: function() {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        exam: {
                            Id: @ViewBag.id,
                            Title: "",
                            PlanId: 0,
                            PlanTitle:"",
                            TplId: 0,
                            Project: [],
                            NumRule: "",
                            NumLength: 3
                        },
                        selector: {
                            where: {
                                Year: lg.GetDate('yyyy'),
                                Semester: "",
                                GradeId: ""
                            },
                            options: {
                                Semester: [
                                    {
                                        Text: "不限",
                                        Value: ""
                                    },
                                    {
                                        Text: "1",
                                        Value: 1
                                    },
                                    {
                                        Text: "2",
                                        Value: 2
                                    }],
                                Grades: []
                            },
                            plans: [],
                            selected: {
                                Id:0,
                                Title:"选择招生计划"
                            }
                        },
                        formData:[
                            {Title:"考试名称",Name:"Title",TypeName:"SingleText"},
                            {Title:"证件模板",Name:"TplId",TypeName:"Select",Options:[]},
                            {Title: "准考证前缀", Name: "NumRule" ,TypeName:"Select"}, 
                            {Title: "随机数位数", Name: "NumLength", TypeName: "Select", Options: [{Text:"1",Value:1},{Text:"2",Value:2},{Text:"3",Value:3},{Text:"4",Value:4},{Text:"5",Value:5}]}
                        ]
                    }
                },
                mounted: function() {
                    this.GetExam();
                    this.GetTemplete();
                    this.getGradesAndSetOption();
                },
                methods: {
                    GetTemplete: function() {
                        lg.request({
                            url:"/api/sys/apply/GetExamTemplateList",
                            success: res => {
                                var options = [];
                                if (res.code == 0 && res.data != null) {
                                    for (let i in res.data) {
                                        options.push({ Text: res.data[i].Title, Value: res.data[i].Id });
                                    }
                                    this.formData[1].Options = options;
                                }
                            }
                        })
                    },
                    Remove: function(index) {
                        this.exam.Project.splice(index, 1);
                    },
                    GetExam: function() {
                        lg.request({
                            url:"/api/sys/apply/GetExam/"+this.exam.Id,
                            success: res => {
                                if(res.code == 0){
                                   this.exam= lg.obj.copyData(this.exam,res.data[0])
                                    this.exam.Project = this.exam.Project.split("|");
                                }else{
                                    layer.msg(res.msg, {icon:2})
                                }
                            }
                        })
                    },
                    AddProject: function() {
                        var hasEmpty= this.exam.Project.filter(p=>p=="").length>0
                        if (!hasEmpty) {
                            this.exam.Project.push("")
                        } else {
                            layer.msg("科目名称不可为空，请填写完整！",{icon:2,anim:6})
                        } 
                    },
                    Submit: function() {
                        var that = this;
                        lg.form.validate({
                            target: ".lg-form-project",
                            fail: function(t, b) {
                                layer.msg(b.msg, { icon: 2 })
                            }
                        });
                        if (lg.form.errors > 0) {
                            return;
                        }
                        var data = this.FormatData();
                        lg.request({
                            url: "/api/sys/apply/EditExam",
                            method: "post",
                            data: data,
                            success: res => {
                                if (res.code == 0) {
                                    layer.msg("修改成功!", { icon: 1, time: 1000 }, function() {
                                        that.back();
                                    });

                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                    },
                    FormatData: function() {
                        var data = lg.obj.copy(this.exam);
                        if (data.Project.length > 0) {
                            data.Project = data.Project.join("|")
                        } else {
                            data.Project=""
                        }
                        return data;
                    },
                    back: function() {
                        frame.Back(page.url, res => {
                            res.laytable.reload();

                        })
                    },
                    OnSelectPlan:function(){
                        this.getPlansForOption();
                        var that = this;
                        layer.open({
                            type: 1
                            , title: "选择计划"
                            , area: ['800px', '500px'] //宽高
                            , content: $("#selector")
                            , btn: ['确认选择', '放弃操作']
                            , yes: function() {
                                if (that.selector.selected) {
                                    that.exam.PlanId = that.selector.selected.Value;
                                    that.exam.PlanTitle = that.selector.selected.Text;
                                    layer.closeAll();
                                } else {
                                    layer.msg("请先选择计划！", { icon: 2 });
                                    return false;
                                }
                            }
                            , bt2: function() {
                                that.selector.selected = 0;
                                layer.closeAll();
                            }
                        })
                    },
                    OnPlanSelected: function(item) {
                        this.selector.selected = item;
                    },
                    getPlansForOption: function() {
                        lg.request({
                            url: "/api/sys/apply/getPlanList",
                            data: {
                                Page: 1,
                                Limit: 9999,
                                Year: this.selector.where.Year,
                                Semester: this.selector.where.Semester,
                                GradeId: this.selector.where.GradeId
                            },
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null) {
                                        var arry = [];
                                        for (let i in res.data) {
                                            arry.push({ Text: res.data[i].Title, Value: res.data[i].Id });
                                        }
                                        this.selector.plans = arry;
                                    } else {
                                        this.selector.plans = [];
                                    }
                                }
                            }
                        })
                    },
                    getGradesAndSetOption: function() {
                        lg.request({
                            url: "/api/sys/apply/GetGradeList",
                            data: { page: 1, limit: 999 },
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null && res.data.length > 0) {
                                        var grades = this.Sort(res.data, 0, []);
                                        var options = [{ Text: '不限', Value: '' }];
                                        for (let i in grades) {
                                            options.push({
                                                Text: grades[i].FullName,
                                                Value: grades[i].Id
                                            })
                                        }
                                        this.selector.options.Grades = options;
                                    } else {
                                        this.selector.options.Grades = [];
                                    }
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    Sort: function(data, fid, arr) {
                        var that = this
                        var grades = data.filter(d => d.FatherId == fid)
                        if (grades.length > 0) {
                            for (let i in grades) {
                                var obj = grades[i];
                                arr.push(obj);
                                that.Sort(data, obj.Id, arr)
                            }
                        }
                        return arr;
                    }

                }
            })
            freeForm.regComponent(app);
            page.vm= app.mount("#lg-EditExam"); 
        }
    }).mount();

</script>